<template>
    <div class="tabbar">
		<div class="tabbar-wrap">
			<div v-for="(item,index) in tabBar" :key="item.url" class="tab-item"
			 @click="navTo(item.url,index)">
				 
				<div v-if="index !==1" class="tab-img">
					<image :src="item.url == currentPage?item.imgClick:item.img" mode=""></image>
				</div>
			    <div v-if="index !==1" class="text":class="{'active':item.url == currentPage}">{{item.text}}</div>
				<div class="hang-item" v-if="index == 1">
					<image :src="item.url == currentPage?item.imgClick:item.img" mode=""></image>
					<div class="text" :class="{'active':item.url == currentPage}" style="padding-top: 5rpx;">{{item.text}}</div>
				</div>
			</div>
		</div>
        
    </div>
</template>

<script>
	import { mapState } from 'vuex';
	import navigationBar from './navigationBar.vue';
    export default {
        props: {
            currentPage: {
                type: String,
                default: ''
            },
			unread:{
				type:Number,
				default:0,
			}
        },
        data() {
            return {
                tabBar: [
					{
                        url: '/pages/index/index',
                        text: '首页',
						img:'/static/tabbar/index_off.png',
						imgClick:'/static/tabbar/index_on.png'
                    },
					{
					    url: '/pages/index/list',
					    text: '逛展馆',
						img:'/static/tabbar/center_off.png',
						imgClick:'/static/tabbar/center_on.png'
					},
					{
					    url: '/pages/index/map',
					    text: '地图',
						img:'/static/tabbar/map_off.png',
						imgClick:'/static/tabbar/map_on.png'
					},
                ],
                level:''
                 
            };
        },mounted(){
           
        },
        created() {
           uni.hideTabBar({})
        },
        computed: {
        	...mapState(['navigationBarHeight','userInfo']),
        },
		components: {
			navigationBar,
		},
		watch:{
		},
        methods: {
            navTo(urls,index) {
				uni.switchTab({
					 url: urls
				 })
				wx.vibrateShort()

            }
        }
    }
</script>

<style scoped lang="scss">
 //导航栏设置
 	
.tabbar {
	width: 100%;
	box-sizing: border-box;
	position: fixed;
	background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, #000000 100%);
	bottom: 0;
	z-index: 99;
	// padding-bottom: constant(safe-area-inset-bottom);/* 兼容 iOS < 11.2 */
	// padding-bottom: env(safe-area-inset-bottom); /* 兼容 iOS >= 11.2 */
	box-sizing: content-box;
	.tabbar-wrap{
		width: 686rpx;
		height: 112rpx;
		margin: 0 auto 16rpx;
		border-radius: 16rpx;
		display: flex;
		padding: 0 30rpx;
		box-sizing: border-box;
		justify-content: space-around;
		align-items: center;
		background: #181818;
	}
	.tab-item {
		box-sizing: border-box;
		position: relative;
		padding: 0 10rpx;
		.text{
			white-space: nowrap;
			font-size: 20rpx;
			color: #878788;
			line-height: 34rpx;
			text-align: center;
		}
		.tab-img{
			width: 40rpx;
			height: 40rpx;
			box-sizing: border-box;
			margin: 0 auto;
			image{
				width: 100%;
				height: 100%;
			}
		}
	}
	.hang-item{
		width: 150rpx;
		height: 150rpx;
		border-radius: 100%;
		box-sizing: border-box;
		margin-top: -60rpx;
		background: #181818;
		border-right: none;
		border-bottom: none;
		border-left: none;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		image{
			margin: 0 auto;
			display: block;
			width: 60rpx;
			height: 36rpx;
		}
	}
	
}
.badge{
	min-width: 35rpx;
	height: 35rpx;
	position: absolute;
	right: 0;
	top: -8rpx;
	border-radius: 20rpx;
	font-size: 20rpx;
	text-align: center;
	color: #FFFFFF;
	box-sizing: border-box;
	padding: 2rpx;
	background: red;
	z-index: 55;
}
.badge2{
	width: 16rpx;
	height: 16rpx;
	border-radius: 50%;
	background: #FF5C48;
	position: absolute;
	right: 0;
	top: -8rpx;
	font-size: 20rpx;
	text-align: center;
	color: #FFFFFF;
	box-sizing: border-box;
	z-index: 55;
}
 .active {
 	color: #FFE5B9 !important;
 }
 

</style>
